<template>
	<div class="allmargin">
		<el-form
			ref="formRef"
			:inline="true"
			:model="queryData"
			@submit.native.prevent
		>
			<el-form-item
				:label="`${$t('common.choose_merchant')}:`"
				prop="merchantId"
			>
				<merchant-select
					v-model="queryData.merchantId"
					v-symbols
					:placeholder="`${$t('common.please_choose')}`"
				></merchant-select>
			</el-form-item>
			<el-form-item
				:label="`${$t('common.member_number')}:`"
				prop="userName"
			>
				<el-input
					v-model.trim="queryData.userName"
					v-symbols
					clearable
					:maxlength="11"
					:placeholder="`${$t('member.username_placeholder')}`"
				></el-input>
			</el-form-item>
			<el-form-item
				:label="`${$t('member.hand_phone_number')}:`"
				label-width="61px"
			>
				<el-select v-model="phoneNoPrefix" style="width:5rem">
					<el-option v-for="item in selectedZonecode" :label="item.code" :value="Number(item.code)+''" :key="item.code" ></el-option>
				</el-select>
				<el-input
					v-model.number="queryData.phoneNo"
					v-symbols
					size="medium"
					placeholder="请输入"
					clearable
					maxlength="11"
					style="width: 150px"
					@keyup.native="checkValue"
				></el-input>
			</el-form-item>
			<!-- <el-form-item :label="`${$t('common.name')}:`" prop="memberName">
				<el-input
					v-model.trim="queryData.realName"
					:placeholder="$t('common.please_enter')"
					style="width: 180px"
					v-symbols
					clearable
				></el-input>
			</el-form-item> -->
			<el-form-item :label="`${$t('member.mailbox')}:`" prop="email">
				<el-input
					v-model.trim="queryData.email"
					size="medium"
					:placeholder="$t('common.please_enter')"
					clearable
					maxlength="32"
					oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
					style="width: 250px"
				></el-input>
			</el-form-item>
			<el-form-item style="margin-left: 8px">
				<el-button
					type="primary"
					icon="el-icon-search"
					size="medium"
					:disabled="disableQuery"
					:loading="loading"
					@click="query"
				>
					{{ $t('common.search') }}
				</el-button>
				<el-button
					icon="el-icon-refresh-left"
					size="medium"
					@click="reset"
				>
					{{ $t('common.reset') }}
				</el-button>
			</el-form-item>
		</el-form>
		<el-tabs v-if="parentData.userId" v-model="activeName">
			<el-tab-pane
				v-if="hasPermission('101032')"
				:label="`${$t('member.essential_infor')}`"
				name="1"
			>
				<essentialInfor
					v-if="activeName === '1'"
					:parentData="parentData"
					:userInfo="userInfo"
					:btnPower="btnPower"
					@setNewUserInfo="setNewUserInfo"
				></essentialInfor>
			</el-tab-pane>
			<el-tab-pane
				v-if="hasPermission('101049')"
				:label="`${$t('member.financial_infor')}`"
				name="2"
			>
				<financialInfor
					v-if="activeName === '2'"
					:parentData="parentData"
				></financialInfor>
			</el-tab-pane>
			<el-tab-pane
				v-if="hasPermission('101055')"
				:label="`${$t('member.login_infor')}`"
				name="3"
			>
				<loginInfor
					v-if="activeName === '3'"
					:parentData="parentData"
				></loginInfor>
			</el-tab-pane>
			<el-tab-pane
				v-if="hasPermission('90150025')"
				:label="`${$t('member.card_table_infor')}`"
				name="4"
			>
				<cardTableInfo
					v-if="activeName === '4'"
					:parentData="parentData"
				></cardTableInfo>
			</el-tab-pane>
			<el-tab-pane
				v-if="hasPermission('90750107')"
				label="鱿鱼信息"
				name="8"
			>
				<squidInfo
					v-if="activeName === '8'"
					:parentData="parentData"
				></squidInfo>
			</el-tab-pane>
			<el-tab-pane
				v-if="hasPermission('90360064')"
				:label="`${$t('member.club_infor')}`"
				name="6"
			>
				<clubInfo
					v-if="activeName === '6'"
					:parentData="parentData"
				></clubInfo>
			</el-tab-pane>
			<el-tab-pane
				v-if="hasPermission('101056')"
				:label="`${$t('member.bank_card_information')}`"
				name="5"
			>
				<bankCard
					v-if="activeName === '5'"
					:parentData="parentData"
				></bankCard>
			</el-tab-pane>
			<!-- 974需求 还在测试中，产品这期暂不上线 2024/07/02 -->
			<el-tab-pane
				v-if="hasPermission('90810104')"
				:label="`${$t('member.risk_information')}`"
				name="12"
			>
				<riskInfo
					:parentData="parentData"
					:userInfo="userInfo"
					:btnPower="btnPower"
					@setNewUserInfo="setNewUserInfo"
				></riskInfo>
			</el-tab-pane>
			<el-tab-pane
				v-if="hasPermission('90750068')"
				:label="`${$t('member.red_limit_template')}`"
				name="7"
			>
				<redLimitTemplate
					:userInfo="userInfo"
					v-if="activeName === '7'"
					:parentData="parentData"
				></redLimitTemplate>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { mapGetters } from 'vuex'
import essentialInfor from './components/essential-infor'
import financialInfor from './components/financial-infor'
import loginInfor from './components/login-infor'
import bankCard from './components/bank-card'
import redLimitTemplate from './components/red-limit-template/index.vue'
import cardTableInfo from './components/card-table-info'
import clubInfo from './components/club-info'
import riskInfo from './components/risk-info.vue'
import squidInfo from './components/squid-info'
import { routerNames } from '@/utils/consts'
export default {
	name: routerNames.memberDetails,
	components: {
		essentialInfor,
		financialInfor,
		loginInfor,
		bankCard,
		redLimitTemplate,
		cardTableInfo,
		clubInfo,
		riskInfo,
		squidInfo
	},

	mixins: [list],
	data() {
		return {
			queryData: {
				merchantId: '',
				userName: '',
				phoneNo: '',
				realName: '',
				email: ''
			},
			phoneNoPrefix: '86',
			activeName: '1',
			parentData: {},
			userInfo: {},
			loading: false,
			disableQuery: true,
			selectedZonecode: []
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		btnPower() {
			const auditArr = []
			const auditList = this.userInfo?.auditList || []
			auditList.forEach((ele) => {
				auditArr.push(ele.applyType)
			})
			return auditArr
		}
	},
	watch: {
		'merchantInfo.id': {
			handler(newVal) {
				if (newVal) {
					this.queryData.merchantId = newVal
				}
				if (this.hasPermission('101032')) {
					this.activeName = '1'
				} else if (this.hasPermission('101049')) {
					this.activeName = '2'
				} else if (this.hasPermission('101055')) {
					this.activeName = '3'
				} else if (this.hasPermission('90150025')) {
					this.activeName = '4'
				} else if (this.hasPermission('90360064')) {
					this.activeName = '6'
				} else if (this.hasPermission('101056')) {
					this.activeName = '5'
				} else if (this.hasPermission('90810104')) {
					this.activeName = '12'
				} else if (this.hasPermission('90750107')) {
					this.activeName = '8'
				}
			},
			immediate: true
		},
		queryData: {
			handler(val) {
				this.disableQuery = !Object.keys(val).find(
					(key) => key !== 'merchantId' && val[key]
				)
			},
			immediate: true,
			deep: true
		},
		$route: function(to, from) {
			if (to.path.indexOf(routerNames.memberDetails) > -1) {
				this.getRouteQuery(true)
			}

			if(Object.keys(this.userInfo).length > 0 && (this.queryData.userName || this.queryData.phoneNo)) {
				this.query()
			}

		}
	},
	mounted() {
		this.getRouteQuery(this.$route.query?.userName)
		this.getSystemKvconfigValue()
	},
	methods: {
		getSystemKvconfigValue() {
			this.$api
				.getSystemKvconfigValue({
					k: 'obbw.zonecode.cellphone.msg'
				})
				.then((res) => {
					if (res.data && res.data.v) {
						const arr =JSON.parse(res.data.v)  
						if (arr && arr.length > 0) {
							this.selectedZonecode = arr
						}
						
					}
					
				})
				.catch(() => {
				})
		},
		getRouteQuery(isLoadData = false) {
			if (this.$route.query.userName) {
				Object.keys(this.queryData).forEach((key) => {
					this.queryData[key] = ''
				})
				this.queryData.merchantId = this.$route.query.merchantId || ''
				this.queryData.userName = this.$route.query.userName || ''
				this.$router.replace({ query: {} })
				if (isLoadData) {
					this.query()
				}
			}
		},
		query() {
			this.parentData = {}
			this.userInfo = {}
			this.loading = true
			this.$api
				.getOutlineInfo({
					...this.queryData,
					phoneNo: this.queryData.phoneNo
						? `${this.phoneNoPrefix}-${this.queryData.phoneNo}`
						: ''
				})
				.then((res) => {
					this.userInfo = res?.data
					const {
						merchantId,
						userName,
						id,
						currency,
						topProxyName,
						clubId,
						businessModel
					} = this.userInfo
					this.parentData = {
						merchantId,
						userName,
						topProxyName,
						userId: id,
						currency,
						clubId,
						businessModel
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},

		setNewUserInfo(newUserInfo) {
			this.userInfo = newUserInfo
		},
		enterSearch() {
			this.query()
		},
		reset() {
			this.userInfo = {}
			this.loading = false
			this.parentData = {}
			this.phoneNoPrefix = '86'
			this.queryData = {
				merchantId: '',
				userName: '',
				phoneNo: '',
				realName: '',
				email: ''
			}

			this.$refs.formRef.resetFields()
		},
		checkValue() {
			this.queryData.registerPhone = this.queryData.registerPhone?.replace(
				/^(0+)|[^\d]+/g,
				''
			)
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep.allmargin {
	margin: 20px;
	height: calc(100vh - 145px);
	.el-tabs__content {
		padding: 10px;
		max-height: calc(100vh - 245px);
		overflow-y: auto;
	}
}
</style>
